import React from 'react';
import classNames from 'classnames';
import {
  Row,
  Col,
  Panel,
  Button
} from 'react-bootstrap';

import * as Util from '../common/Util';
import * as Apis from '../config/Apis';
import * as Shell from '../common/Shell';
import Notify from '../common/Notification';
import { message as MessageConfig, domain } from '../config/Common';

class MessageConfirm extends React.Component {

  constructor() {
    super();

    this.state = {
      chkProtocol : false
    };
  }

  static propTypes = {
      
  }

  openExternalLink(url){
    let params = { url, showCloseBtn : true, title : '在线行情' };
    Shell.callShellMethod( "webViewPlugin", null, null, params );
  }

  handleCheckboxChange(){
    this.setState({
      chkProtocol:!this.state.chkProtocol
    });
  }

  handleLongMessageView(e){

    if(this.state.chkProtocol === true){
      let { handleLongMessageView } = this.props;
      handleLongMessageView(e); 
    }
  }

  getViewDisabled (){
    let { message } = this.props;
    let disabled = true;
    if (message) {
      let tradetime = message.tradetime;
      tradetime = Util.DateFormater(tradetime, 'yyyyMMdd');
      let currenttime = Util.DateFormater(new Date(), 'yyyyMMdd');
      //中线买入，仅在当天可查看
      if (tradetime == currenttime) {
        disabled = false;
      }
    }
    return disabled;
  }

  render(){

      let { message } = this.props;

      let disabled = this.getViewDisabled();
      
      let stockcode = message.stockcode;
      let stockarea = Util.getStockArea(stockcode);
      let stockMarketApi = String.format(Apis.stockMarketApi, stockcode, stockarea);
      let stockTradeApi = String.format(Apis.stockTradeApi, stockcode, stockarea);
      return (
          <Panel className="product-item message-item">
                  <div className="product-avatar">
                    <img src={`${domain}${message.pic}`} className="img-circle"/>
                  </div>
                  <div className="product-detail">
                      <h4 className="text-info title">
                        {message.name}
                      </h4>
                      <p className="text-info item">
                          <label>
                            { Util.DateFormater(message.tradetime, 'MM-dd hh:mm') }
                          </label>
                      </p>
                  </div>

                  <div className="devider"></div>

                  <div className="product-data"> 
                      <Panel className="panel-thin margin-bottom-none">
                          <div className="text-center">
                              <h6 className="text-primary">有中线买卖消息，是否查看？</h6>
                              <p className="margin-bottom-none">
                                {
                                  disabled?
                                  <input type="checkbox" disabled/>
                                  :
                                  <input type="checkbox" checked={this.state.chkProtocol} onChange={this.handleCheckboxChange.bind(this)}/>
                                }
                                我已阅读并同意<a className="border-bottom" href="#/RuleLong">《中线操作规则》</a>
                              </p>
                          </div>
                      </Panel>

                      <div className="padding padding-bottom-none text-center">
                          {
                            disabled?
                            <Button bsStyle="primary" disabled block>
                              消息已过期
                            </Button>
                            :
                            <Button bsStyle="primary" block onClick={this.handleLongMessageView.bind(this)}>
                              立即查看
                            </Button>  
                          }
                      </div>
                  </div>
          </Panel>
      );
  }
}

export default MessageConfirm;